<template>
	<view>
		<view v-if="userType=='会员'">
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				 @clickItem="onClickItem" />

			<view class="content">
				<view class="classType" v-if="leagueClass.length!==0" v-for="item in leagueClass">
					<image src="/static/img/practice.png"></image>
					<view class="info">
						<text class="classType-courseName">{{item.name}}</text>
						<view class="classType-tags">
							<text v-for="(item1,index) in item.tags">
								{{item1}}
							</text>

						</view>
						<view class="classType-description" v-if="item.description!=null">
							{{item.description}}
						</view>
						<view class="classType-button" @click="chooseClasses(item)">
							选课
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-else>
			<view class="teacher-header">
				<view style="flex:1">
					已开课程
				</view>
				<view style="flex: 0 0 8vh;" @click="openDialog()">
					<uni-icons type="plusempty" size="30"></uni-icons>
				</view>
			</view>
			<view class="classes">
				<view class="classes-item" v-for="item in classesList">
					<view class="classes-item-top">
						{{item.endTime}}
					</view>
					<view class="classes-item-bottom">
						<view class="classes-item-bottom-imgs">
							<image :src="item.imgs"></image>
						</view>
						<view class="classes-item-bottom-main">
							<view class="classes-item-bottom-main-name">
								{{item.name}}
							</view>
							<view class="classes-item-bottom-main-roomName">
								{{item.roomName}}
							</view>
						</view>
						<view class="button" @click="navToStudentList(item.id)">
							查看会员
						</view>

					</view>
				</view>
			</view>

		</view>
		<view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="新建课程" value="对话框预置提示内容!" placeholder="请输入内容"
					@confirm="dialogInputConfirm">
					<uni-forms ref="baseForm" :modelValue="baseFormData">
						<uni-forms-item label="课程名称" required>
							<uni-easyinput v-model="baseFormData.name" placeholder="请输入课程名称" />
						</uni-forms-item>
						<uni-forms-item label="课程价格">
							<uni-easyinput v-model="baseFormData.price" placeholder="请输入课程价格" />
						</uni-forms-item>
						<uni-forms-item label="课程上限人数" required>
							<uni-easyinput v-model="baseFormData.pmax" placeholder="请输入课程上限人数" />
						</uni-forms-item>
						<uni-forms-item label="标签" required>
							<uv-checkbox-group v-model="baseFormData.tags">
								<uv-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in tagsList"
									 :label="item.text" :name="item.value"></uv-checkbox>
							</uv-checkbox-group>
						</uni-forms-item>
						<uni-forms-item label="教室名称" required>
							<uni-data-select v-model="baseFormData.roomName" :localdata="roomList">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="开课时间">
							<uni-datetime-picker type="datetime" return-type="string"
								v-model="baseFormData.startTime" />
						</uni-forms-item>
						
						<uni-forms-item label="结束时间">
							<uni-datetime-picker type="datetime" return-type="string"
								v-model="baseFormData.endTime" />
						</uni-forms-item>
						<view @click="upload()">上传一张上课环境</view>
						<view style="width: 12vh; height: 12vh;margin: 0 12vh;">
							<image style="width: 100%;height: 100%;margin: auto;" :src="imageUrl"></image>
						</view>
											
						<uni-forms-item label="课程描述">
							<uni-easyinput type="textarea" v-model="baseFormData.description" placeholder="请输入课程描述" />
						</uni-forms-item>
					</uni-forms>
				</uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>
<script>
	import {
		addClasses,
		getClassList
	} from '../../api/class'
import { getRoomList } from '../../api/room'
	import {
		getTagsList
	} from '../../api/tags'
	import {
		chooseClasses,
		getClassByTeacherId,
		getSelectedClassesByTeacherId,
		getSelectedClassesByUserId,
		getUserById
	} from '../../api/user'
	import {
		baseUrl
	} from '../../config.js'
	export default {
		data() {
			return {
				current: 0,
				styleType: "text",
				items: [],
				userType: "",
				leagueClass: [],
				personalTrainers: [],
				classicCourse: [],
				classLessons: [],
				classesList: [],
				tagsList: [],
				baseFormData:{},
				roomList:[],
				imageUrl:"",
				imageName:""

			}
		},
		methods: {

			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					getClassList(this.items[this.current]).then(res => {
						console.log(res);
						for (var i = 0; i < res.data.data.length; i++) {
							var tags = res.data.data[i].tags.split(",")
							res.data.data[i].tags = tags
						}
						this.leagueClass = res.data.data
					})
				}
			},
			chooseClasses(e) {
				console.log(e);
				var params = {
					classId: e.id,
					userId: uni.getStorageSync('auth')
				}
				uni.showModal({
					title: "是否选择此课程",
					success: function(res) {
						if (res.confirm) {
							chooseClasses(params).then(res => {
								if (res.data.code == 0) {
									uni.showToast({
										title: res.data.msg,
										duration: 2000,
										icon: "error"
									})
								} else {
									uni.showToast({
										title: res.data.data,
										duration: 2000
									})
								}
								console.log(res);
							})
						} else {
							uni.showToast({
								title: "用户取消操作",
								icon: "none",
								duration: 2000
							})
						}

					}
				})

			},
			navToStudentList(id) {
				uni.navigateTo({
					url: "/pages/detail/studentDetail?id=" + id
				})
			},
			openDialog() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(){
				console.log(this.baseFormData);
				var tags=""
				for (var i = 0; i < this.baseFormData.tags.length; i++) {
					tags+=this.baseFormData.tags[i]+","
				}
				tags=tags.substring(0,tags.lastIndexOf(','))
				delete this.baseFormData.tags
				var params={
					...this.baseFormData,
					teacherId:uni.getStorageSync('auth'),
					tags:tags,
					imgs:this.imageName
				}
				getUserById(uni.getStorageSync('auth')).then(r=>{
					params.tname=r.data.data.name
					addClasses(params).then(res=>{
						console.log(res);
					})
				})
				
			},
			upload(){
				var _this = this
				wx.chooseMessageFile({
				    count: 1, 
				    type: 'file',
				    success (res) {
				        // tempFilePath可以作为img标签的src属性显示图片
				        console.log(res);
				        const tempFilePaths = res.tempFiles[0].path
				        let filename = res.tempFiles[0].name; //用于页面显示的名字
				        // 这一步判断可以省略，如果需求没有格式要求的话
				        console.log("开始上传")
				        wx.uploadFile({
				            url: baseUrl+'/common/upload',   //上传的路径
				            filePath: tempFilePaths, //刚刚在data保存的文件路径
				            name: 'file',   //后台获取的凭据
				            fileName:filename,
				            success(res1) { 
				                console.log(JSON.parse(res1.data).data);
				                _this.imageName = JSON.parse(res1.data).data
				                _this.imageUrl = baseUrl+"/common/download?name="+JSON.parse(res1.data).data
								console.log(_this.imageUrl);		
				            }
				        })
				        console.log('上传到服务器')
				    }
				
				})
				console.log('上传到服务器')
			},
			init(){
				var userId = uni.getStorageSync('auth')
				var _this = this
				console.log("userId:" + userId);
				getUserById(userId).then(res => {
					console.log("getUserById");
					console.log(res);
					this.userType = res.data.data.type
					if (this.userType == '老师') {
						getRoomList().then(res=>{
							for (var i = 0; i < res.data.data.length; i++) {
								var params={
									text:res.data.data[i].name,
									value:res.data.data[i].name
								}
								this.roomList.push(params)
							}
						})
						getClassByTeacherId(userId).then(res => {
							console.log(res);
							for (var i = 0; i < res.data.data.length; i++) {
								res.data.data[i].imgs = baseUrl + "/common/download?name=" + res.data
									.data[i].imgs
							}
							this.classesList = res.data.data
						})
					} else {
						getTagsList().then(res=>{
							for (var i = 0; i < res.data.data.length; i++) {
								this.items[i]=res.data.data[i].name
							}
							if(res.data.code==1){
								getClassList(this.items[this.current]).then(res => {
									console.log(res);
									for (var i = 0; i < res.data.data.length; i++) {
										var tags = res.data.data[i].tags.split(",")
										res.data.data[i].tags = tags
									}
									_this.leagueClass = res.data.data
								})
							}
							
						})
						
					}
				})
			}

		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			this.init()
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

	}

	.classType {
		display: flex;
		background-color: white;
		width: 90%;
		margin-bottom: 2vh;
		position: relative;
	}

	.classType image {
		margin: 2vh;
		width: 18vh;
		height: 10vh;
		display: flex;
		justify-content: left;
		border-radius: 1vh;
	}

	.classType text {
		/* 当文本超出view块时内容隐藏 */
		overflow: hidden;
		/* 文本突出不换行 */
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.classType-courseName {
		font-weight: bold;
		position: absolute;
		top: 2vh;
		width: 23vh;
		height: 4.5vh;
	}

	.classType-tags {
		display: flex;
		position: absolute;
		top: 6vh;
	}

	.classType-tags text {
		border: 1px solid #15CCBB;
		margin: 0 0.2vh;
		padding: 0.3vh 0.7vh;
		font-size: 1vh;
		border-radius: 0.6vh;
		color: #15CCCA;
	}

	.classType-description {
		position: absolute;
		top: 9.5vh;
		color: #999999;
	}

	.classType-button {
		background-color: #15CCCA;
		width: 8vh;
		position: absolute;
		top: 8vh;
		right: 2vh;
		text-align: center;
		height: 4vh;
		line-height: 4vh;
		border-radius: 2vh;
		color: white;
	}

	.teacher-header {
		display: flex;
		background-color: white;
		text-align: center;
		height: 6vh;
		line-height: 6vh;
	}

	.classes-item {
		display: flex;
		flex-direction: column;
		margin: 1vh;
		background-color: white;


	}

	.classes-item-top {
		color: #15CCBB;
		font-size: 3vh;
	}

	.classes-item-bottom {
		display: flex;
	}

	.classes-item-bottom-imgs {
		width: 16vh;
		height: 10vh;
		padding: 2vh;
	}

	.classes-item-bottom-imgs image {
		width: 100%;
		height: 100%;
	}

	.classes-item-bottom-main {
		display: flex;
		flex-direction: column;
		padding: 2vh;
		margin-top: 1vh;
		flex: 1;
	}

	.classes-item-bottom-main-name {
		font-size: 2.8vh;
	}

	.classes-item-bottom-main-roomName {
		font-size: 3vh;
	}

	.button {
		flex: 0 0 10vh;
		background-color: #15CCBB;
		height: 3vh;
		padding: 2vh;
		color: white;
		border-radius: 2vh;
		text-align: center;
		line-height: 3vh;
		margin: 4vh 1vh;
		font-size: 2vh;
	}
	.uni-popup-dialog{
		display: flex;
		flex-direction: column;
	}

</style>